<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Event Test Page</title>
</head>
<body>
<h1>Used to test responding to a ready event emitted on document</h1>

<table id="table" border="1" cellpadding="1" >
	<thead>
	<th>A</th>
	<th>B</th>
	<th>C</th>
	</thead>
	<tbody>
	</tbody>
</table>
<script>

  var table = document.getElementById('table')
  for (i = 0; i < 100; i++) {
    table.innerHTML += '<tr><td>Hello</td><td>Loveley</td><td>World</td></tr>'
  }

  // There is a Bug with Chromium that does not position headers correctly when scaled
  // Maybe they'll fix it one of these days, this is a quick check to see
  table.style.transformOrigin = 'top left'
  table.style.transform='scale(.8)'

  document.body.dispatchEvent(new CustomEvent('view-ready', {}))

  var eventEmitInterval = setInterval(function () {
//    document.dispatchEvent(new Event('ready'))
    document.body.dispatchEvent(new CustomEvent('view-ready', {}))
  }, 25)

  document.body.addEventListener('view-ready-acknowledged', function(){
    clearInterval(eventEmitInterval)
  })


</script>
</body>
</html>